<template>
  <div class="container">
    <div class="nav">
      <!-- 导航 -->
      <xwBreadCrumb />
      <el-link type="primary" href="/admin/nowplaying">返回列表页</el-link>
    </div>
    <div class="form">
      <el-form :model="form" ref="form" label-width="100px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="电影基础信息" name="0">
            <el-form-item label="电影标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="电影封图信息" name="1">电影封图信息</el-tab-pane>
          <el-tab-pane label="电影预告片" name="2">
            <el-upload action="" :auto-upload="false" :show-file-list="false" :on-change="changeVideo">
              <el-button type="primary">上传视频</el-button>
            </el-upload>
            <br />
            <video v-if="video != ''" :src="video" controls poster="http://img.1314000.cn/swiper-1.jpeg" />
          </el-tab-pane>
          <el-tab-pane label="电影详情信息" name="3">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 200px; overflow-y: hidden"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <el-divider />
      <el-button type="primary" @click="submitForm('form')">添加热映电影</el-button>
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 给定内容，生成一个md5
import SparkMd5 from 'spark-md5'
import { fileToBinary } from '@/utils/tools'
import { uploadChunkFileApi, mergeChunkFileApi } from '@/api/filmApi'
import { successMsg } from '@/utils/msg'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      video: '',
      form: {
        title: ''
      },
      activeName: '2',
      // 富文本编辑对象
      editor: null,
      // 富文本中的数据，初始化数怕大
      html: '',
      // 工具栏,可以自定义
      toolbarConfig: {},
      // 富文本设置 预设
      editorConfig: {
        placeholder: '请输入电影内容信息...',
        MENU_CONF: {
          color: {
            // colors: ['#000', '#333', '#666']
          }
        }
      },
      //  模式
      mode: 'default' // or 'simple'
      // mode: 'simple' // or 'simple'
    }
  },
  beforeDestroy() {
    this.editor && this.editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    async changeVideo(file) {
      if (!file) return
      // 对于文件较大的上传进行分片上传,把一个大文件，拆分成若干个小的文件，然后再上传
      // 切成小的方案
      // 1. 指定大小，然后来切文件  大小固定，数量不定
      // 2. 指定数量，然后来切文件，数据固定，大小不定
      // 上传时，要有一个编号，这样在服务器端才能根据此编号完成文件的合并操作
      // 还需要根据文件的内容，生成一个根据内容来得到的一个唯一随机字符串，此字符串一定要和内容是关联，只要内容有变化，则随机字符串要有变化，如果内容没有变化，则字符串不变(hash字符串[hash值])
      // 如果你没有此hash值，这样有可能在上传过来中，如果有两个相同的文件，就会上传两次，不太好
      // 有hash值，在合并的时候，可以用此hash值，来当作合并后的文件名称
      // hash值_0.mp4
      // hash值_1.mp4
      // hash值_2.mp4
      // ==> hash值.mp4 完整的文件
      // 指定切片数量后，每片的大小是多少
      let partSize = file.raw.size / this.partNum
      let currentIndex = 0
      let buffer = await fileToBinary(file.raw, 'buffer')
      // 把得到的buffer计算出来一个hash值
      let spark = new SparkMd5.ArrayBuffer()
      spark.append(buffer)
      // 根据文件内容来得到hash字符串，当前切片的前缀
      let hash = spark.end()
      // 文件扩展名 没有带.
      let extName = file.raw.name.split('.').pop()
      // 存储切好文件 数组
      let partList = []
      for (let i = 0; i < this.partNum; i++) {
        let chunk = file.raw.slice(currentIndex, (i + 1) * partSize)
        partList.push({
          filename: `${hash}_${i}.${extName}`,
          chunk
        })
        currentIndex += partSize
      }
      // console.log(partList)
      this.partList = partList
      this.hash = hash
      this.extName = extName

      // 进行网络请求处理，多个小文件，按序请求
      // 请求数组，先把所有的小文件要上传的请求给放到一个数组中
      /* let requestList = [ajax1,ajax2,ajax3]
      Promise.all(requestList).then(()=>{
        // 发起一个请求，让它合并就可以
      }) */

      let requestList = []
      partList.forEach(({ filename, chunk }) => {
        const requestFn = () => {
          const formData = new FormData()
          formData.append('filename', filename)
          formData.append('chunk', chunk)
          uploadChunkFileApi(formData)
        }
        requestList.push(requestFn)
      })

      const delay = (time = 300) => {
        return new Promise(_ => {
          setTimeout(() => {
            _('')
          }, time)
        })
      }

      let index = 0
      const complete = async () => {
        await delay()
        await mergeChunkFileApi(this.hash, this.extName)
        successMsg('上传完毕')
      }
      const next = async () => {
        if (index >= requestList.length) {
          await complete()
          return
        }
        let name = await requestList[index++]()
        console.log(name)
        next()
      }
      next()
    },
    onCreated(editor) {
      // 一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log({ ...this.form, html: this.html })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
video {
  width: 480px;
  height: 272px;
}
// 定义变量
.container {
  .nav {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
